<template>
  <div class="container">
    <div class="row-center" style="width: 100% ;padding: 20px">
      <div class="col" style="width: 100%">
        <Input v-model="input" placeholder="搜索题材、映射" icon="ios-search" @on-click="doSearch" size="large"
               @on-keyup="doSearch"
        />
        <Button type="ghost" style="margin-top: 20px;width: 100px" @click="modalAddMapping= true">添加映射</Button>
        <Table height="700" :columns="tableHeader" :data="mappingData" border highlight-row
               @on-current-change="onSelected" style="margin-top: 20px;"></Table>
      </div>
      <div class="col" style="width: 100%;margin-left: 50px">
        <span style="height: 35px;font-size: 25px;"> {{currentMapping.blockName}}</span>

        <Button type="ghost" style="margin-top: 20px;width: 100px" @click="modalAddKeyword = true">增加关键字</Button>
        <Table height="700"  :columns="keywordTableHeader" :data="keywordData" border
               style="margin-top: 20px;"></Table>

      </div>
    </div>
    <Modal
      width="400"
      title="添加映射"
      @on-ok="commitAddMapping()"
      v-model="modalAddMapping">
      <div class="col">
        <span style="margin-bottom: 10px">题材：</span>
        <Input v-model="addSubjectName"/>
        <span style="margin-top: 20px;margin-bottom: 10px">映射：</span>
        <Input v-model="addBlockName"/>

      </div>
    </Modal>
    <Modal
      width="400"
      title="修改映射"
      @on-ok="commitSetMapping()"
      v-model="modalSetMapping">
      <div class="col">
        <span style="margin-bottom: 10px">题材：</span>
        <Input v-model="currentMapping.topicName"/>
        <span style="margin-top: 20px;margin-bottom: 10px">映射：</span>
        <Input v-model="currentMapping.blockName"/>

      </div>
    </Modal>

    <Modal
      width="400"
      title="添加关键词"
      @on-ok="commitAddKeyword"
      v-model="modalAddKeyword">
      <div class="col">
        <span style="margin-bottom: 10px">关键词：</span>
        <Input style="margin-bottom: 10px" v-model="addKeyword"/>
        <span style="margin-bottom: 10px">板块占比：</span>
        <Input style="margin-bottom: 10px" v-model="addWordPriorProbability"/>
        <span style="margin-bottom: 10px">条件概率：</span>
        <Input v-model="addWordConditionaProbability"/>
      </div>
    </Modal>

  </div>
</template>

<script>

  import axios from "../assets/http/http";

  export default {
    name: 'BlockKeyword',
    data() {
      return {
        input: '',
        addKeyword: '',
        addWordPriorProbability: '',
        addWordConditionaProbability: '',
        modalAddMapping: false,
        modalSetMapping: false,
        modalSetNews: false,
        modalAddKeyword: false,
        addSubjectName: '',
        addBlockName: '',
        mappingDataAll: [],
        mappingData: [],
        newsData: [],
        blockNameData: [],
        keywordData: [],
        currentMapping: '',
        currentKeyword: '',
        tableHeader: [
          {
            title: '题材',
            key: 'topicName',
            minWidth: 125,
            align: 'center',

          }, {
            title: '名称映射',
            key: 'blockName',
            minWidth: 125,
            align: 'center',

          },
          {
            title: '操作',
            key: 'action',
            minWidth: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  style: {
                    marginRight: '20px'
                  },
                  on: {
                    click: () => {
                      this.saveMapping(params.row)
                    }
                  }
                }, '修改'),

                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },

                  on: {
                    click: () => {
                      this.removeMapping(params)
                    }
                  }
                }, '删除'),
              ]);
            }
          }],
        keywordTableHeader: [
          {
            title: '关键词',
            key: 'word',
            minWidth: 110,

          }, {
            title: '板块占比',
            key: 'wordPriorProbability',
            minWidth: 110,

          },
          {
            title: '条件概率',
            key: 'wordConditionaProbability',
            align: 'center',
            minWidth: 110,


          },
          {
            title: '操作',
            key: 'action',
            minWidth: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [


                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },

                  on: {
                    click: () => {
                      this.removeKeyword(params)
                    }
                  }
                }, '删除'),
              ]);
            }
          }

        ],
      }
    },

    methods: {
      removeKeyword(info) {
        axios.post('mode/delKeyword', {
          "id": info.row.id,
          "block": info.row.block,
          "id": info.row.id,
        }).then(rsp => {
          if (rsp.data.retCode === 1) {
            this.$Message.success("删除成功");
            this.keywordData.splice(info.index, 1)
          }
        }).catch(error => {
          console.log(error);
        })
      },
      commitAddKeyword() {
        axios.post('man/mode/addKeyword', {
          "word": this.addKeyword,
          "block": this.currentMapping.topicName,
          "wordConditionaProbability": this.addWordConditionaProbability,
          "wordPriorProbability": this.addWordPriorProbability,

        }).then(rsp => {
          if (rsp.data.retCode === 1) {
            this.$Message.success("添加成功");
            this.modalAddKeyword = false;
            this.getKeywordList(this.currentMapping.topicName);
          } else {
            this.$Message.error(rsp.data.msg);
          }
        }).catch(error => {
          console.log(error);
        })
      },
      getKeywordList(subject) {
        axios.get('mode/listModelByTopicName?topicName=' + subject).then(rsp => {
          if (rsp.data.retCode === 1) {
            if (rsp.data.retData) {
              this.keywordData = rsp.data.retData;

            } else {
              this.keywordData = [];
            }

          }
        }).catch(error => {
          console.log(error);
        })
      },
      delNews(item) {
        axios.get('man/news/confirm?contentId=' + item.contentId + "&blockClassify=" + item.blockClassify + "&newBlockClassify=未分类"
        ).then(rsp => {
          if (rsp.data.retCode === 1) {
            this.$Message.success("删除成功");
            this.modalSetNews = false;
            this.getNewsList();
          } else {
            this.$Message.error(rsp.data.msg);
          }
        }).catch(error => {
          console.log(error);
        })
      },
      onSelectBlockName(value) {
        this.currentKeyword.newBlockClassify = value;
      },
      setNews(item) {
        this.currentKeyword = item;
        this.modalSetNews = true;
      },
      commitSetKeyword() {
        axios.get('man/news/confirm?contentId=' + this.currentKeyword.contentId + "&blockClassify=" + this.currentKeyword.blockClassify + "&newBlockClassify=" + this.currentKeyword.newBlockClassify
        ).then(rsp => {
          if (rsp.data.retCode === 1) {
            this.$Message.success("修改成功");
            this.modalSetNews = false;
            this.getNewsList();
          } else {
            this.$Message.error(rsp.data.msg);
          }
        }).catch(error => {
          console.log(error);
        })
      },

      commitAddMapping() {
        axios.post('man/subject/mapping/addBlockMapping', {
          "topicName": this.addSubjectName,
          "blockName": this.addBlockName
        }).then(rsp => {
          if (rsp.data.retCode === 1) {
            this.$Message.success("添加成功");
            this.modalAddMapping = false;
            this.initMappingTable();
          } else {
            this.$Message.error(rsp.data.msg);
          }
        }).catch(error => {
          console.log(error);
        })
      },


      commitSetMapping() {
        axios.post('man/subject/mapping/setBlockMapping', {
          "topicName": this.currentMapping.topicName,
          "blockName": this.currentMapping.blockName,
          "subjectId": this.currentMapping.subjectId

        }).then(rsp => {
          if (rsp.data.retCode === 1) {
            this.$Message.success("修改成功");
            this.modalSetMapping = false;
            this.initMappingTable();
          }
        }).catch(error => {
          console.log(error);
        })
      },
      saveMapping(info) {
        this.currentMapping = info;
        this.modalSetMapping = true;
      },
      removeMapping(params) {
        axios.post('man/subject/mapping/delBlockMapping', {
          "subjectId": params.row.subjectId
        }).then(rsp => {
          if (rsp.data.retCode === 1) {
            this.$Message.success("删除成功");
            this.initMappingTable();
          }
        }).catch(error => {
          console.log(error);
        })
      },
      doSearch() {
        if (this.input === null || this.input.trim() === "") {
          this.mappingData = this.mappingDataAll;
        } else {
          this.mappingData = [];
          var result = this.input.trim().toLocaleLowerCase();
          for (var i = 0; i < this.mappingDataAll.length; i++) {
            if (this.mappingDataAll[i].blockName.indexOf(result) >= 0 || this.mappingDataAll[i].topicName.indexOf(result) >= 0) {
              this.mappingData.push(this.mappingDataAll[i]);
            }
          }
        }
      },
      doSearchByTopicName(currentRow) {

        axios.get('subject/mapping/listAllMapping').then(rsp => {
          if (rsp.data.retCode === 1) {
            if (rsp.data.retData) {
              this.mappingData = this.mappingDataAll = [];
              this.mappingData = this.mappingDataAll = rsp.data.retData;

              this.currentMapping = currentRow;
              this.mappingData = [];
              for (var i = 0; i < this.mappingDataAll.length; i++) {
                if (this.input.trim() === this.mappingDataAll[i].blockName && currentRow.topicName.trim() === this.mappingDataAll[i].topicName) {
                  this.mappingData.push(this.mappingDataAll[i]);
                  this.getKeywordList(currentRow.topicName);
                }
              }
            }

          }
        }).catch(error => {
          console.log(error);
        });


      },

      onSelected(currentRow, oldCurrentRow) {
        this.currentMapping = currentRow;
        this.getKeywordList(currentRow.topicName);
      },
      getNewsList() {

        axios.get('news/blockEvents?blockClassify=' + this.currentMapping.blockName).then(rsp => {
          if (rsp.data.retCode === 1) {
            if (rsp.data.retData) {
              this.newsData = rsp.data.retData;
            } else {
              this.newsData = [];
            }

          }
        }).catch(error => {
          console.log(error);
        })


      },

      initMappingTable() {
        axios.get('subject/mapping/listAllMapping').then(rsp => {
          if (rsp.data.retCode === 1) {
            if (rsp.data.retData) {
              this.mappingData = this.mappingDataAll = [];
              this.mappingData = this.mappingDataAll = rsp.data.retData;

            }

          }
        }).catch(error => {
          console.log(error);
        })
      },
    },
    created() {
      this.initMappingTable();

    }
  }
</script>

<style scoped>

  .container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    box-sizing: border-box;
  }

  @media screen and (min-width: 1281px) and (max-width: 2000px) {

  }


</style>
